<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>微圈管理</title>
    <script src="/jquery/jquery-3.2.1.min.js"></script>
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <link rel="stylesheet" href="/css/product/productManage/productList/product-details.css"/>

    <style>
        img{
            height: 100px;
            width: 100px;
        }
        .layui-form-label{
            width: 150px;
        }
        .body_content{
            width: 330px;
            height: 55px;
            text-align: center;
            line-height: 55px;
            border: 1px solid #A1A1A1;
            color: #979797;
        }
    </style>
</head>
<body>
<div class="box" style="margin-left: 80px;  width: 1500px;" >
    <table>
        <tr class="table_head">
            <th>微圈管理</th>
        </tr>
        <tr>
            <th class="table_body body_title">标题：</th>
            <th class="table_body body_content" name="artcleTitle"></th>
            <th class="table_body body_title">创作人：</th>
            <th class="table_body body_content" name="userName"></th>
            <th class="table_body body_title">分类：</th>
            <th class="table_body body_content" name="artcleCategroyName"></th>
        </tr>
        <tr>
            <th class="table_body body_title">日期：</th>
            <th class="table_body body_content" name="releaseDate"></th>
            <th class="table_body body_title">账号：</th>
            <th class="table_body body_content" name="account"></th>
            <th class="table_body body_title">查看量：</th>
            <th class="table_body body_content" name="acticleHits"></th>
        </tr>

        <tr>
            <th class="table_body body_title">点赞量：</th>
            <th class="table_body body_content" name="acticleLike"></th>
            <th class="table_body body_title">评论量：</th>
            <th class="table_body body_content" name="acticleReviews"></th>
            <th class="table_body body_title">分享量：</th>
            <th class="table_body body_content" name="acticleShare"></th>
        </tr>
        <tr class="view_title">
            <th class="table_body view_title_left"><i class="layui-icon layui-icon-chart-screen"></i>&nbsp;&nbsp;文章内容</th>
        </tr>
        <tr class="show_description">
            <th class="table_body" id="article" name="article" style="height: 410px;"></th>
        </tr>
    </table>
    <div style="width: 1451px; height: 500px; border: 1px silver solid;">
        <div style="padding-left: 22px;">
            <div style="width: 100%;height: 50px; line-height: 70px;font-size: 30px; ">回复及需要修改内容</div>
        </div>
        <div style="margin-top: 20px;border-top: 2px silver solid;">
            <form class="layui-form" lay-filter="layForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名：</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="trueName"/>
                        <input class="layui-input" name="display" type="hidden" value="2"/>
                        <input class="layui-input" type="hidden" name="type" value="4"/>
                        <input class="layui-input" type="hidden" name="userId" id="userId"/>
                        <input class="layui-input" type="hidden" name="currentTime" id="currentTime"/>
                        <input class="layui-input" type="hidden" name="createId" id="commentMicrocircleId"/>
                        <input class="layui-input" type="hidden" name="createDate" id="createDate"/>
                        <input class="layui-input" type="hidden" name="releaseDate" id="releaseDate"/>
                        <input class="layui-input" type="hidden" name="status" id="status" value="1"/>
                        <input class="layui-input" type="hidden" name="userType" id="userType" value="2"/>
                        <input class="layui-input" type="hidden" name="acticleHits"/>
                        <input class="layui-input" type="hidden" name="acticleLike"/>
                        <input class="layui-input" type="hidden" name="acticleReviews"/>
                        <input class="layui-input" type="hidden" name="acticleShare"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">账号：</label>
                    <div class="layui-input-inline">
                        <input class="layui-input" name="account"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">回复评论：</label>
                    <div class="layui-input-inline">
                        <textarea style="width: 350px; height: 200px;" id="content" name="content"></textarea>
                    </div>
                </div>
                <input class="layui-btn" type="button" value="确定" id="determine" style="margin-left: 180px;"/>
            </form>
        </div>
    </div>
    <div style="width: 1451px; height: 500px;">
        <div style="width: 100%; height: 50px ;line-height: 50px; padding-left: 22px; font-size: 20px;"><i></i> 全部评论</div>
        <div style="border-top: 2px silver solid;">
            <div class="all_body" style="width: 78%;">

            </div>
            <div style="width: 200px; height: 50px; line-height: 50px; margin: 0 auto;">
                <span style="color: #00FF00;">已无更多评论</span>
            </div>
        </div>
    </div>
</div>
</body>

    <script>
        layui.use(["layer","form","jquery"],function () {
            var
                layer = layui.layer,
                form = layui.form,
                $ = layui.jquery;
            var commentMicrocircle = JSON.parse(localStorage.getItem("commentMicrocircle"));
            var user = JSON.parse(localStorage.getItem("user"));
            $("#commentMicrocircleId").val(commentMicrocircle.microcircleId);
            $("#createDate").val(commentMicrocircle.createDate);
            $("#releaseDate").val(commentMicrocircle.releaseDate);
            $("#userId").val(user.userId);
            var artcleUrl = localStorage.getItem("artcleUrl");
            var userAcatarUrl = localStorage.getItem("userAcatarUrl");
            // $(".boxLeftImgDiv").append('<img style="border-radius:50%;width: 100px;height: 100px;" src="'+userAcatarUrl+'"/>');
            $.ajax({
                url:"/comment/getTypeComment",
                data:{},
                type:'post',
                dataType:'json',
                success:function(data){

                    var list = data.data;
                    for(var i= 0 ; i < list.length ; i ++){


                        if(list[i].display == 2 && list[i].status != 3 && list[i].commodityId == commentMicrocircle.microcircleId){
                            $('.all_body').append('<div id="ListsComment" style="width: 1200px;">'+'<img id="acatar_url" style="height: 50px; width: 50px;border-radius: 50%;" src="'+list[i].acatarUrl+'"/>&nbsp;' +
                                '<label id="comment_user">'+list[i].trueName+'：'+'</label>&nbsp;' +
                                '<label id="comment_content">'+list[i].content+'</label>&nbsp;&nbsp;&nbsp;' +
                                '<label id="show_time">'+list[i].commentDate+'</label>&nbsp;&nbsp;&nbsp;' +
                                '<a onclick="javascript:hideComment('+list[i].id+','+list[i].display+');">隐藏</a>&nbsp;&nbsp;&nbsp;' +
                                '<a onclick="javascript:deleteTable('+list[i].id+');">删除</a>'+'</div>');
                        }else if(list[i].display == 3 && list[i].status != 3 && list[i].commodityId == commentMicrocircle.microcircleId){
                            $('.all_body').append('<div id="ListsComment" style="width: 1200px;">'+'<img style="height: 50px; width: 50px;border-radius: 50%;" id="photo" src="'+list[i].acatarUrl+'"/>&nbsp;' +
                                '<label id="comment_user">'+list[i].trueName+'：'+'</label>&nbsp;' +
                                '<label id="comment_content">'+list[i].content+'</label>&nbsp;&nbsp;&nbsp;' +
                                '<label id="show_time">'+list[i].commentDate+'</label>&nbsp;&nbsp;&nbsp;' +
                                '<a onclick="javascript:hideComment('+list[i].id+','+list[i].display+');">显示</a>&nbsp;&nbsp;&nbsp;' +
                                '<a onclick="javascript:deleteTable('+list[i].id+');">删除</a>'+'</div>');
                        } else if(list[i].status == 3 && list[i].commodityId == commentMicrocircle.microcircleId){
                            $('.all_body').append('<div id="ListsComment" style="width: 1200px;">'+'<img style="height: 50px; width: 50px;border-radius: 50%;" id="photo" src="'+list[i].acatarUrl+'"/>&nbsp;' +
                                '<label id="comment_user">'+list[i].trueName+'：'+'</label>&nbsp;' +
                                '<label id="comment_content">'+list[i].content+'</label>&nbsp;&nbsp;&nbsp;' +
                                '<label id="show_time">'+list[i].commentDate+'</label>&nbsp;&nbsp;&nbsp;' +
                                '<label style="color: #037EFE">已删除</label>'+'</div>');
                        }
                    }

                }
            })
            hideComment = function hideComment(id,display){
                var user = localStorage.getItem("user");
                user = JSON.parse(user);
                if(display == 2){
                    //点击隐藏或展示对状态进行修改
                    var param = {
                        "id":id,
                        "display":3,
                        "updateId":user.data.userId,
                        "updateDate":getTime()
                    };
                    $.ajax({
                        url:"/comment/updateDisplay",
                        data:param,
                        type:'post',
                        dataType:'json',
                        success:function (data) {
                            location.reload();
                        }
                    });
                }else if(display == 3){
                //点击隐藏或展示对状态进行修改
                    var param = {
                        "id":id,
                        "display":2,
                        "updateId":user.data.userId,
                        "updateDate":getTime()
                    };
                    $.ajax({
                        url:"/comment/updateDisplay",
                        data:param,
                        type:'post',
                        dataType:'json',
                        success:function (data) {
                            location.reload();
                        }
                    });
                }

            }
            deleteTable = function deleteTable(id){
                $.ajax({
                    url:'/comment/deleteComment',
                    data:{"id":id},
                    type:"post",
                    dataType:'json',
                    success:function (data) {
                        location.reload();
                    }
                })
            }
            $("#determine").click(function () {
                $("#currentTime").val(getTime());
                var layForm = form.val("layForm");
                $.ajax({
                    url:"/comment/addMicrocircleComment",
                    data:layForm,
                    type:'post',
                    dataType:'json',
                    success:function (data) {
                        if (data.data == true) {
                            location.reload();
                            layer.msg("添加成功");

                        }else{
                            layer.msg("添加失败");
                        }

                    }
                });
            });
            //现在时间
            function getTime(){
                var date=new Date();
                var year=date.getFullYear();
                var month=date.getMonth()+1;
                var day=date.getDate();
                var hour=date.getHours();
                var minute=date.getMinutes();
                var second=date.getSeconds();
                var dateStr = year+"-"+zeroFilling(month)+"-"+zeroFilling(day)+" "+zeroFilling(hour)+":"+zeroFilling(minute)+":"+zeroFilling(second);
                return dateStr;
            }
            function zeroFilling(data){
                if(data<10){
                    data="0"+data;
                }
                return data;
            }
        })
    </script>
</html>